<template>
  <div>
    
    <!-- 
      目标: 父(当前vue文件) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去 - 标签属性传值

      目标2：子触发父组件的自定义事件，实现修改父组件数据
        父组件：
          @自定义事件="事件处理函数"
        子组件：
          this.$emit('自定义事件', 值)
    -->
    <MyProduct 
      v-for="(item, index) in list" 
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.info"
      :index="index"
      @kanPrice="kanFn"
    ></MyProduct>
  </div>
</template>

<script>
// 导入组件
import MyProduct from './components/MyProduct.vue'
export default {
  data () {
    return {
      list: [
          { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
          { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
          { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
      ],
    }
  },
  // 注册组件
  components:{
    MyProduct
  },
  methods: {
    // 自定义事件的处理函数
    kanFn(index, price){
      // 低于 1 元就不给砍了
      if(this.list[index].proprice < 1){
        return alert('兄弟，再砍就凉凉了')
      }
      // 根据索引减少价格
      this.list[index].proprice = (this.list[index].proprice - price).toFixed(2)
    }
  }
}
</script>

<style>

</style>